import React, { useState } from 'react'
import { Button, Form, DatePicker, Select,Upload, Table, Input, Row, Col, Modal, message, Menu, Spin, Badge } from 'antd';
import request from '@/http';
import { EditObject, Edit } from './Edit';
import { SeditObject, Sedit } from './Sedit';



export default function index() {
    const [formObject] = Form.useForm();//获取数据

    
    const [currentEditObject, setCurrentEditObject] =React.useState<EditObject>({
      isModalVisible: false,
    });

    const [currentsEditObject, setCurrentsEditObject] =
    React.useState<SeditObject>({
      isModalVisible: false,
    });

    const tableTitle:any[]=[//数据表头
        {title:'序号',dataIndex:'Id'},{title:'名称',dataIndex:'subjectName'},{title:'视频',dataIndex:'video'},{title:'视频时长',dataIndex:'times'},{title:'简介',dataIndex:'courseSynopsis'},{title:'操作',
        render: (text:any, record:any) => (
          <>
            <Button type="link" onClick={async () => {
                await request.post('/api/Course/EditCourse?courseId='+text.Id).then((response:any)=>{
                  message.success('编辑成功');
                  getData( 1, 5);
                })
              }} >
                删除
            </Button>
          <Button type="link" onClick={() => {
                    setCurrentEditObject({
                      isModalVisible: true,
                      ...record
                    });
                  }} >
            编辑
          </Button>
          
          {/* <Button type="link" onClick={() => { 
                   
                  }} > 
                  视频上传
          </Button> */}
          <Button type="link" onClick={() => {
            console.log('wowo')
                     setCurrentsEditObject({
                      isModalVisible: true,
                      ...record
                    });
                  }} >
            试卷管理
          </Button>
          </>
        ),
      }]

      const [pagination, setPagination] = React.useState({//分页器
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '50', '200', '500'],
        showQuickJumper:true,
        defaultPageSize:5,
        showTotal:(total:any, current:any) => `共 ${total} 条记录  第 ${current[0]}~${current[1]}条`,
      });

      const userEditOnClose = async () => {
        getData( 1, 5);
      };

      const usersEditOnClose = async () => {
        getData( 1, 5);
      };

      const [dataSource, setDataSource] = React.useState<any[]>();//数据集合
      const getData=async (   
        pageValue: any,
        pageSizeValue: any                        
        ) => {
          await request.get('/api/Course/GetAllCourse',
          ).then((response:any)=>{
            if(response.code==200){
              const data=response.data.map((item:any,index:number)=>({
                key:item.id,
                "Id":item.id,
                "subjectName": item.courseName,
                'courseSynopsis':item.courseSynopsis,
                'times':item.times,
                'video':item.video
            }))
                const newPageObject = {
                  ...pagination,
                  // current: pageValue,
                  // pageSize: pageSizeValue,
                };
                setPagination(newPageObject);
                setDataSource(data)
                setspinning(false)
            }else{
              message.error(response.message)
              setspinning(false)
            }
            })
      }
    React.useEffect(()=>{
      getData( 1, 5);
    },[])
    const [spinning, setspinning] = useState(true);
    return (
      <Spin spinning={spinning} size="large">
        <>
            <Row style={{marginTop:30}} justify="center">
                <Col span={20}>
                <Form
                        className="ant-advanced-search-form"
                        form={formObject}
                        onFinish={async (values:any)=>{
                          setspinning(true)
                          await request.get('/api/Course/GetAllCourse?courseName='+values.subjectName).then((response:any)=>{
                            if(response.code==200){
                                if(response.data!=null){
                                    const data=response.data.map((item:any,index:number)=>({
                                        key:item.id,
                                        "Id":item.id,
                                        "subjectName": item.courseName,
                                        'courseSynopsis':item.courseSynopsis,
                                        'times':item.times,
                                        'video':item.video
                                      }))
                                      // const newPageObject = {
                                      //   ...pagination,
                                      //   current: pageValue,
                                      //   pageSize: pageSizeValue,
                                      // };
                                      // setPagination(newPageObject);
                                      setDataSource(data)
                                }else{
                                    setDataSource(response.slists)
                                }
                              setspinning(false)
                              message.success(response.message);
                            }else{
                              setspinning(false)
                              message.success(response.message);
                            }
                          })
                        }}
                        >
                          <Row gutter={24}>

                          <Col span={6}>
                          <Form.Item label="名称" name="subjectName">
                          <Input placeholder="请录入" />
                            </Form.Item>
                          </Col>
                          <Col span={6} >
                            <Button type="primary" htmlType="submit">
                              查询
                            </Button>
                            <Button
                              style={{ margin: '0 8px' }}
                              onClick={() => {
                                formObject.resetFields();
                              }}
                            >
                              重置
                            </Button>
                          </Col>
                          </Row>
                    </Form>
                </Col>
                <Col span={20} offset={1}>
                    <Button style={{ marginBottom: '10px' }} type="primary" onClick={() => {
                      setCurrentEditObject({
                        isModalVisible: true,
                      });
                    }}
                    >新增科目</Button>
                    <Table
                        columns={tableTitle}
                        dataSource={dataSource}
                        pagination={pagination}
                        // onChange={pageOnChange}//分页、排序、筛选变化时触发(用以重新获取数据)
                        tableLayout="fixed"
                        
                    />
                </Col>
            </Row>
            <Edit editObject={currentEditObject} onClose={userEditOnClose}></Edit>
            <Sedit editObject={currentsEditObject} onClose={usersEditOnClose}></Sedit>
        </>
        </Spin>
    )
}